<template>
  <div class="panentTop" @click="billboardItem">
    <div>
      <img
      class="imgGeDan"
        :src="item.picUrl + '?imageView=1&type=webp&thumbnail=122.88x0'"
        alt=""
      />
    </div>
    <div class="text">🎧 {{ item.playCount | playvolume }}</div>
    <div class="text2">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  methods:{
    billboardItem(){
      this.$router.push('/billboard')
      this.$emit('billboard-item',this.item)
    }
  },

  filters: {
    //取截单元,单位
    playvolume: function (arg) {
      if (arg.toString().length >= 13) {
        // return arg/1000000000000+"万亿"
        const volume = arg / 1000000000000;
        const realVal = parseFloat(volume).toFixed(2);
        return realVal + "万亿";
      } else if (arg.toString().length >= 9) {
        const volume = arg / 100000000;
        const realVal = parseFloat(volume).toFixed(2);
        return realVal + "亿";
      } else if (arg.toString().length >= 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(2);
        return realVal + "万";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}
.panentTop {
  position: relative;
  margin-top:20rem;
  width: 32%;
  overflow: hidden;
  .imgGeDan{
    width: 122.88rem;
  }
}

.panentTop:nth-child(3n-1){
    margin-left: 2%;
    margin-right: 2%;
}
.text {
  position: absolute;
  top: 5rem;
  right: 5rem;
  z-index: 99;
  color: #fff;
  font-size: 12rem;
}
.text2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 6rem 2rem 0 6rem;
  min-height: 30rem;
  line-height: 1.2;
  font-size: 13rem;
}
</style>
